<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>执照管理</el-breadcrumb-item>
      <el-breadcrumb-item>考试管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row>
        <el-col :span="12">
          <el-button @click.native="addExamDialogVisible=true">添加考试</el-button>
        </el-col>
      </el-row>
      <el-table :data="examData" style="width: 100%" >
        <el-table-column prop="examName" label="考试名称" width="180"></el-table-column>
        <el-table-column prop="examStartTime" label="开始日期" width="180"></el-table-column>
        <el-table-column prop="examEndTime" label="结束日期" width="180"></el-table-column>
        <el-table-column prop="examCode" label="考试类别"></el-table-column>
        <el-table-column prop="examLevel" label="考试等级"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            
            <el-button @click="openEditExam(scope.row)">修改</el-button>
            <el-button @click="removeExam(scope.row)">删除</el-button>
            <el-button @click="getThisExamJoinUsers(scope.row)">查看报名</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加考试区域 -->
    <el-dialog title="添加考试" :visible.sync="addExamDialogVisible" width="50%">
<el-form ref="form" :model="addExamForm" label-width="130px">
      <el-form-item label="考试名称">
    <el-input v-model="addExamForm.examName"></el-input>
  </el-form-item>
  <el-form-item label="考试类别">
    <el-select v-model="addExamForm.examCode" placeholder="请选择考试类别">
      <el-option label="固定翼" value="A"></el-option>
      <el-option label="多旋翼" value="X"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="考试等级">
    <el-select v-model="addExamForm.examLevel" placeholder="请选择考试等级">
      <el-option label="少年级" value="1"></el-option>
      <el-option label="初级" value="2"></el-option>
       <el-option label="中级" value="3"></el-option>
      <el-option label="高级" value="4"></el-option>
       <el-option label="特级" value="5"></el-option>
    </el-select>
  </el-form-item>
 <el-form-item label="报名开始时间">
  <el-date-picker
      v-model="addExamForm.examStartTime"
      type="datetime"
      placeholder="选择开始时间">
    </el-date-picker>
     </el-form-item>
     <el-form-item label="报名结束时间">
  <el-date-picker
      v-model="addExamForm.examEndTime"
      type="datetime"
      placeholder="选择结束时间">
    </el-date-picker>
     </el-form-item>
     <el-form-item label="是否只能会员报考">
    <el-switch v-model="addExamForm.allowOfficeUser" active-value="1" inactive-value="0"></el-switch>
  </el-form-item>
   <el-form-item label="允许最大年龄">
    <el-input v-model="addExamForm.allowAgeMax"></el-input>
  </el-form-item>
   <el-form-item label="允许最小年龄">
    <el-input v-model="addExamForm.allowAgeMin"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
        <el-button @click="addExamDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="addExam()">确 定</el-button>
      </span>
    </el-dialog>
     <!-- 修改考试区域 -->
      <el-dialog title="添加考试" :visible.sync="editExamDialogVisible" width="50%">
    <el-form ref="form" :model="editExamForm" label-width="130px">
      <el-form-item label="考试名称">
    <el-input v-model="editExamForm.examName"></el-input>
  </el-form-item>
  <el-form-item label="考试类别">
    <el-select v-model="editExamForm.examCode" placeholder="请选择考试类别">
      <el-option label="固定翼" value="A"></el-option>
      <el-option label="多旋翼" value="X"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="考试等级">
    <el-select v-model="editExamForm.examLevel" placeholder="请选择考试等级">
      <el-option label="少年级" value="1"></el-option>
      <el-option label="初级" value="2"></el-option>
       <el-option label="中级" value="3"></el-option>
      <el-option label="高级" value="4"></el-option>
       <el-option label="特级" value="5"></el-option>
    </el-select>
  </el-form-item>
 <el-form-item label="报名开始时间">
  <el-date-picker
      v-model="editExamForm.examStartTime"
      type="datetime"
      placeholder="选择开始时间">
    </el-date-picker>
     </el-form-item>
     <el-form-item label="报名结束时间">
  <el-date-picker
      v-model="editExamForm.examEndTime"
      type="datetime"
      placeholder="选择结束时间">
    </el-date-picker>
     </el-form-item>
     <el-form-item label="是否只能会员报考">
    <el-switch v-model="editExamForm.allowOfficeUser" :active-value="1" :inactive-value="0"></el-switch>
  </el-form-item>
   <el-form-item label="允许最大年龄">
    <el-input v-model="editExamForm.allowAgeMax"></el-input>
  </el-form-item>
   <el-form-item label="允许最小年龄">
    <el-input v-model="editExamForm.allowAgeMin"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
        <el-button @click="editExamDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="editExam()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看报名人员 -->
      <el-dialog title="该考试人员" :visible.sync="joinExamUserDialogVisible" width="50%">
 <el-table
      :data="joinExamUserData"
      style="width: 100%">
 
 <el-table-column
        prop="userName"
        label="姓名"
        width="180">
</el-table-column>
<el-table-column
        prop="orgName"
        label="所属单位"
        width="180">
</el-table-column>

<el-table-column
        prop="age"
        label="年龄"
        width="180">
</el-table-column>
<el-table-column
        label="审核"
        width="180">
        <template slot-scope="scope">  
            <el-switch
              v-model="scope.row.confirmState"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeJoinExamUserState(scope.row)"
            ></el-switch>

        </template>
</el-table-column>
</el-table>
      </el-dialog>
  </div>
</template>
<style lang="less" scoped>
</style>
<script>
export default {
  data() {
    return {
      examData: [],//考试信息列表
      joinExamUserData:[],//该考试的考生
      addExamDialogVisible: false,//添加考试的窗口
      editExamDialogVisible:false,//修改考试的窗口
      joinExamUserDialogVisible:false,//查看报名人员的窗口
      addExamForm:{//添加考试的项目
      examName:'',
      examCode:'',
      examLevel:'',
      allowOfficeUser:'',
      allowAgeMax:'',
      allowAgeMin:'',
      examStartTime:'',
      examEndTime:'',

      },
       editExamForm:{//修改考试的项目
       examId:'',
        examName:'',
        examCode:'',
        examLevel:'',
        allowOfficeUser:'',
        allowAgeMax:'',
        allowAgeMin:'',
        examStartTime:'',
        examEndTime:'',

      }
    };
  },
  created() {

     this.getExamList()
  },
  methods: {
    //显示所有考试
async getExamList(){
 const { data: res } = await this.$http.get("asfc-exam/getAllExam");

 if (res.code !== 200) {
        this.$message.error("获取失败！");
      }
      this.examData = res.data;
},
//审核通过
async changeJoinExamUserState(joinExamUser){
  console.log(joinExamUser)
 const { data: res } = await this.$http.put(`join-exam-user/changeJoinExamUserState?jeuId=${joinExamUser.id}&state=${joinExamUser.confirmState}`);
 if (res.code !== 200) {
        this.$message.error("获取用户列表失败！");
      } else if (res.code === 200) {
        this.$message.success("状态修改成功！");
      }

},
//查看该考试的考生
async getThisExamJoinUsers(exam){
 const { data: res } = await this.$http.get(`join-exam-user/getThisExamUsers?id=${exam.examId}`);
if (res.code !== 200) {
        this.$message.error("获取失败！");
      }
this.joinExamUserDialogVisible=true
this.joinExamUserData=res.data
},

    //添加考试
  async addExam(){
 const { data: res } = await this.$http.put("asfc-exam/addExam", {
examName:this.addExamForm.examName,         
examCode:this.addExamForm.examCode,
examLevel:this.addExamForm.examLevel,
allowOfficeUser:this.addExamForm.allowOfficeUser,
allowAgeMax:this.addExamForm.allowAgeMax,
allowAgeMin:this.addExamForm.allowAgeMin,
examStartTime:this.addExamForm.examStartTime,
examEndTime:this.addExamForm.examEndTime,
  }
 )
 if (res.code !== 200) {
        this.$message.error("添加失败！");
      } 
      this.addExamDialogVisible=false
 this.getExamList()
  },
//打开修改考试
async openEditExam(exam){
  console.log(exam)
const { data: res } = await this.$http.get(`asfc-exam/getOneExam?id=${exam.examId}`)
if (res.code !== 200) {
        this.$message.error("获取失败！");
      } 

this.editExamForm=res.data
this.editExamDialogVisible=true
},
  //修改考试
 async editExam(){
   console.log(this.addExamForm.examName)
 const { data: res } = await this.$http.put("asfc-exam/updateExam", {
   examId:this.editExamForm.examId,    
examName:this.editExamForm.examName,         
examCode:this.editExamForm.examCode,
examLevel:this.editExamForm.examLevel,
allowOfficeUser:this.editExamForm.allowOfficeUser,
allowAgeMax:this.editExamForm.allowAgeMax,
allowAgeMin:this.editExamForm.allowAgeMin,
examStartTime:this.editExamForm.examStartTime,
examEndTime:this.editExamForm.examEndTime,

  }
 )
 if (res.code !== 200) {
        this.$message.error("修改失败！");
      } 
       this.$message.success("修改成功");
        this.editExamDialogVisible=false
   this.getExamList()

  },
//删除考试
 async removeExam(exam){
      
const { data: res } = await this.$http.put(`asfc-exam/removeExam?id=${exam.examId}`)
 if (res.code !== 200) {
        this.$message.error("删除失败");
      } else if (res.code === 200) {
       
        this.$message.success("删除成功");
       this.getExamList()
        
      }
      

  },



  },

}
</script>